<template>
  <HeaderLayout
    title = '日程一览'

    :flex="true"
  >
    <div class="schedule-content">
      <div class="schedule-sider">
        <div class="schedule-sider-header" @click="handleDateIconClick">
          <Icon type = 'rili' />
        </div>
        <div class="schedule-sider-content" ref='date'>
          <ul>
            <li v-for="(v, i) in data" :key="i" :class="{ active: activeDateIndex === i }" @click="handleDateClick(v, i, $event)">
              <div class="month">{{ moment(v.date).format('M月') }}</div>
              <div class="day">{{ moment(v.date).format('D') }}</div>
              <div class="week">{{ moment(v.date).format('dddd') }}</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="table">
        <div class="table-header" ref='header'>
          <table cellspacing="0" v-for="(v, i) in data" :key="i" v-if="activeDateIndex === i">
            <thead>
              <tr>
                <th>主会场（文华宴会厅）{{ i + 1 }}</th>
                <th>会场一（文华宴会厅1）{{ i + 1 }}</th>
                <th>会场二（文华宴会厅2）{{ i + 1 }}</th>
                <th>会场二（文华宴会厅3）{{ i + 1 }}</th>
                <th>会场四（文华多功能厅3）{{ i + 1 }}</th>
                <th>会场五（嘉华宴会厅1）{{ i + 1 }}</th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="table-body" @scroll="handleScroll">
          <table cellspacing="0" v-for="(v, i) in data" :key="i" v-if="activeDateIndex === i">
            <thead>
              <tr>
                <th>主会场（文华宴会厅）{{ i }}</th>
                <th>会场一（文华宴会厅1）{{ i }}</th>
                <th>会场二（文华宴会厅2）{{ i }}</th>
                <th>会场二（文华宴会厅3）{{ i }}</th>
                <th>会场四（文华多功能厅3）{{ i }}</th>
                <th>会场五（嘉华宴会厅1）{{ i }}</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
              </tr>
              <tr>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
              </tr>
              <tr>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
              </tr>
              <tr>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
              </tr>
              <tr>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
              </tr>
              <tr>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
                <td>
                  <p class="table-date"><Icon type = 'shijian' />08:30-10:10</p>
                  <p class="table-text">大会报告Session1</p>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>      
    </div>
  </HeaderLayout>
</template>

<script>

import $ from 'jquery'
import moment from 'moment'
import HeaderLayout from '@/layout/headerLayout/index.vue'
import Icon from '@/component/icon'

const now = new Date().getTime()

export default {

  name: '',

  data() {
    return {
      data: [...Array(20)].map((v, i) => ({
        id: i,
        date: now
      })),
      activeDateIndex: 0
    }
  },

  components: {
    HeaderLayout,
    Icon,
  },

  methods: {
    handleDateClick: function (v, i, e) {
      this.activeDateIndex = i
    },
    handleDateIconClick: function (e) {
      $(this.$refs.date).animate({ scrollTop: 0 })
    },
    handleScroll: function (e) {
      if (this.$refs.header) {
        this.$refs.header.scrollLeft = e.target.scrollLeft
      }
    },
    moment: t => moment(t),
  }

}

</script>

<style lang="less" scoped>

@import '../../less/mixin.less';

.schedule-content {
  flex-grow: 1;
  display: flex;
}

.schedule-sider {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  width: 50px;
  margin-right: 6px;

  &-header {
    flex-shrink: 0;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom-right-radius: 18px;
    color: #fff;
    background: #1A5AA3;
    margin-bottom: 8px;

    i {
      font-size: 24px;
    }
  }

  &-content {
    flex-grow: 1;

    .scrollable();

    ul {
      li {
        margin-bottom: 8px;
        height: 158px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-direction: column;
        margin-bottom: 8px;
        border-top-right-radius: 18px;
        border-bottom-right-radius: 18px;
        color: #747474;
        background: #fff;
        border: 1px solid #DCE2ED;
        border-left: none;
        transition: background-color .2s, border-color .2s;

        &.month {
          font-size: 13px;
          margin-bottom: 3px;
        }

        .day {
          font-weight: 500;
          font-size: 15px;
        }

        .week {
          font-size: 9px;
          color: #fff;
          padding: 3px 4px 2px;
          margin-top: 8px;
          background-color: #747474;
          transition: background-color .2s, color .2s;
        }

        &:active,
        &.active {
          background: #1A5AA3;
          border-color: #1A5AA3;
          color: #fff;

          .week {
            color: #1A5AA3;
            background-color: #fff;
          }
        }
      }
    }
  }
}

.table {
  padding-bottom: 50px;
  flex-grow: 1;
  position: relative;
  overflow: hidden;

  &-header {
    overflow: hidden;
  }

  &-body {
    overflow-x: auto;
    overflow-y: auto;
    height: 100%;

    table {
      margin-top: -50px;
    }
  }

  table {
    width: 100%;

    th {
      height: 50px;
      vertical-align: middle;
      color: #fff;
      padding: 0 15px;
      font-size: 14px;
      background: #1E4A7A;
      white-space: nowrap;
      text-align: center;
      border-right: 1px solid #fff;
      font-weight: normal;

      &:last-child {
        border-right: none;
      }
    }
    td {
      padding: 15px;
      height: 137px;
      background: #fff;
      vertical-align: top;
      text-align: left;
      border: 1px solid #f4f5f7;

      .table-date {
        font-size: 13px;
        color: #1677E4;
        font-weight: 600;
        margin-bottom: 10px;
        white-space: nowrap;

        i {
          font-weight: normal;
          margin-right: 6px;
          font-size: 14px;
        }
      }

      &:nth-child(even) {
        .table-date  {
          color: #E3690E;
        }
      }

      .table-text {
        font-size: 13px;
        color: #262626;
        line-height: 1.5;
      }
    }
  }
}

</style>
